﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM-jQuery基础</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>

</head>
<body>
<div id="a1">逐浪在2000年前后就开始酝酿开发了</div>
<div id="a2">我们想做一个优秀的软件</div>
<div class="a3">就如同我们歌曲所唱的toggleClass()方法反向操作，原本没有 bg-primary</div>
<div class="a4 bg-primary">追求美好-使用toggleClass()方法可以进行盲猜反向操作，如果存在就删除，如果不存就添加，这一行原本有bg-primary</div>
<div class="a5 bg-danger">这个块本来有bg-danger的，但用了removeClass()移除</div>
<div class="a6">css(preoperties)方法可以进行列表式的绑定样式。</div>




<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script>
$(document).ready(function () {
    $(`#a1`).addClass(`bg-info`);   //添加
    $(`.a5`).removeClass(`bg-danger`);   //移除
    $(`.a3,.a4`).toggleClass(`bg-primary`); //反向操作
    $(`.a6`).css({
        "border":"1px solid #000",
        "font-size":"2rem",
        'color':'#f00'
    })


})

</script>
</body>
</html>
